<!-- 这里面把设计页面上的东西整理过来 -->

<template>
  <view>
    <view class="flex-col page">
      <view class="flex-col justify-start self-stretch relative group">
        <view class="flex-col justify-start">
          <view class="flex-col section">
            <view class="flex-col mt-22-5">
              <view class="flex-row justify-between items-center group_2">
                <view class="flex-row items-center section_3">
                  <uni-data-select class="data-select-style" v-model="driverId" :localdata="driverlist" :bode="false"
                    :border="false" @change="selecChange" :clear="true"
                    :placeholder="driverlist.length > 0 ? '请选择设备' : '请添加设备'">
                  </uni-data-select>
                </view>
                <view class="add-device-button" @click="handAddBle">
                  <uni-icons type="plusempty" color="#fffae8" size="30"></uni-icons>
                </view>
              </view>
              <view class="flex-row mt-14">
                <image class="shrink-0 image_7" src="@/static/images/driver.png" />
                <view class="flex-col flex-1 self-start group_5">
                  <text class="self-start text text_3">Gabblebean</text>
                  <text class="self-stretch text text_4">你可以变换Gabblebean的角色， 让她更有趣</text>
                  <view class="flex-row justify-center equal-division group_6">


                    <view class="flex-row section_4" @click="testBattery">

                      <image :class="['shrink-0 image_8 ', setBattryStlye()]" src="/static/images/battry.png" />
                      <text class="font text text_6 ml-7">{{ deviceInfo.battery }}%</text>
                    </view>
                    
                    <view class="flex-row items-center section_4 ml-10" @click="testWifi">
                      <image :class="['shrink-0 image_2', { 'hsl-disable': deviceInfo.status === '0' }]"
                        src="/static/images/wifi.png" />
                      <text class="font text text_5 ml-5-5">{{
                        deviceInfo.status === '1' ? '正常' : '离线' }}</text>
                    </view>



                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- 把原来的弹出框抽出来 -->
        <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" @change="change">
          <add-ble @onclose="close" @onbleIsOpen="handOnbleIsOpen"></add-ble>
        </uni-popup>

      </view>
    </view>

  </view>
</template>

<script>


export default {
  components: {
    'add-ble': () => import('./add-ble/add-ble.vue')
  },

  data() {
    return {

      driverId: null,
      driverlist: [
        { value: "element.driverId", text: "element.name" },
        { value: "短", text: "短" },
        { value: "超长", text: "超长词条超长词条超长词条超长词条超长词条超长词条超长词条超长词条超长词条" },
      ],
      deviceInfo: {
        battery: 100,
        status: '1'
      }

    };
  },
  mounted() {
    this.$refs.popup.open('bottom')
  },
 
  
  methods: {

    //添加测试wifi状态显示事件
    testWifi() {
      console.log("测试wifi")
      if (this.deviceInfo.status == '0') {
        this.deviceInfo.status = '1'
      }
      else {
        this.deviceInfo.status = '0'
      }
    },
    //测试电量
    testBattery() {
      console.log("测试电量")
      switch (this.deviceInfo.battery) {
        case -1:
          this.deviceInfo.battery = 100  //满电
          break;
        // case 100:
        //   this.deviceInfo.battery = 10   //低电量
        //   break;
        case 10:
          this.deviceInfo.battery = -1    //电池无数据
          break;

        default:
          this.deviceInfo.battery = this.deviceInfo.battery - 10
          break;
      }
    },
    setBattryStlye() {
      if (this.deviceInfo.battery < 30 && this.deviceInfo.battery > 0) {
        return 'battery-level low'
      }
      else if (this.deviceInfo.battery < 0) {
        return 'hsl-disable'
      }
      else {
        return 'battery-level height'
      }
    },

    selecChange(e) {
      console.log("选择设备", e)
    },
    //打开页面
    change(e) {
      if (e.show) {
        console.log("打开页面")
      } else {
        console.log("关闭页面")
      }
    },
    //点击添加按钮
    handAddBle() {
      this.$refs.popup.open('bottom')
    },
    //点击了我已打开按钮
    handOnbleIsOpen() {
      console.log("蓝牙已经打开")
    },
    close() {
      console.log("执行关闭页面")
      this.$refs.popup.close()
    }

  }
}
</script>

<style lang="scss" scoped>
.hsl-disable {
  filter: saturate(0%);
}


.add-device-button {
  /* 增加高度以适应图标大小 */
  border-radius: 50%;
  background-color: rgba(247, 238, 219, 0.5);
  /* 50%透明度的绿色 */
  color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}

.equal-division-item_1 {
  padding: 8.5px 9.5px 8.5px 10px;
  background-color: #fff5e3;
  border-radius: 30px;
  height: 25.5px;
}

.mt-22-5 {
  margin-top: 22.5px;
}

.ml-85 {
  margin-left: 85px;
}

.mt-9 {
  margin-top: 9px;
}

.ml-5-5 {
  margin-left: 5.5px;
}

.ml-7 {
  margin-left: 7px;
}

.mt-13-5 {
  margin-top: 13.5px;
}

.page {
  background-color: #f7f7f7;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}

.group {
  padding-bottom: 405px;
}

.section {
  padding: 17.5px 3.5px 112.5px;
  background-image: linear-gradient(180deg, #fed24f 0%, #feb452 100%);
  border-radius: 0px 0px 30px 30px;
}

.group_2 {
  padding: 0 5.5px;
}

.group_3 {
  border-radius: 16px;
  width: 33.5px;
  height: 13.5px;
}

.image_4 {
  width: 24px;
  height: 9px;
}

.group_4 {
  margin-right: 6.5px;
}

.image {
  width: 19px;
  height: 12px;
}

.image_2 {
  width: 17.5px;
  height: 12.5px;
}

.image_3 {
  width: 27.5px;
  height: 13px;
}

.section_3 {
  z-index: 1;
  padding: 14px 5.5px;
  background-color: #fefff999;
  border-radius: 30px;
  backdrop-filter: blur(6.5px);
  height: 40px;
  border: solid 0.5px #ffffff;
  text-overflow: ellipsis;
  /* 超出部分显示省略号 */
}

.data-select-style {

  margin-right: 0rpx;
  border-radius: 30px;
  border: solid 0.5px #4b4b4b00;
  border-bottom: solid 1px #ffffff00;
}

//限制选择组件长度
/deep/ .uni-stat__select {
  .uni-select__input-text {
    width: 30vw !important;
  }
}

.image_6 {
  width: 12px;
  height: 6px;
}

.image_5 {
  margin-right: 6px;
  border-radius: 50%;
  width: 29px;
  height: 29px;
}

.image_7 {
  filter: drop-shadow(-1.5px 4px 5px #c77e001a,
      -6px 16.5px 9px #c77e0017,
      -14px 36.5px 12px #c77e000d,
      -24.5px 65px 14px #c77e0003,
      -38.5px 102px 15.5px #c77e0000);
  width: 151.5px;
  height: 152px;
}

.group_5 {
  margin: 31.5px 20px 0 -5px;
}

.group_6 {
  margin-top: 19.5px;
}

.section_4 {
  padding: 8.5px 9.5px 8.5px 10px;
  background-color: #fff5e3;
  border-radius: 30px;
  height: 25.5px;
}

.image_8 {
  width: 18px;
  height: 8.5px;
}

.font {
  font-size: 10px;
  font-family: DIN;
  color: #674d00;
}

.section_5 {
  padding: 6.5px 12px;
  background-color: #fff5e3;
  border-radius: 30px;
  height: 25.5px;
}

.section_2 {
  padding-top: 238.5px;
  background-color: #00000099;
}

.pos {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.pos_4 {
  position: absolute;
  right: 16.5px;
  bottom: 46.5px;
}

.group_10 {
  margin-top: 25px;
  height: 81.5px;
}

.font_2 {
  font-size: 14px;
  font-family: PingFang SC;
  line-height: 30.5px;
  color: #909399;
}

.text {
  text-transform: capitalize;
}


.text_5 {
  margin-right: 1.5px;
  line-height: 9px;
}

.text_6 {
  line-height: 7.5px;
}

.text_4 {
  margin-top: 9.5px;
  color: #a57b00;
  font-size: 13px;
  font-family: PingFang SC;
  line-height: 20.5px;
}

.text_3 {
  color: #6f4b00;
  font-size: 22px;
  font-family: ZiZhiQuXiMaiTi;
  line-height: 18.5px;
}

</style>
    
      